<template>
  <el-card class="box-card">
    <el-icon size="size" color="color">
      <Search />
    </el-icon>
    <span>筛选搜索</span>
    <div>
      <el-button plain>重置</el-button>
      <el-button type="primary" @click="searchUserList">搜索查询</el-button>
    </div>
    <span>账号/姓名: </span>
    <el-input placeholder="请输入账号、姓名" v-model="searchParams.keyword" />
  </el-card>

  <el-card class="box-card" shadow="hover">
    <el-icon><Tickets /></el-icon>
    <span>数据列表</span>
    <el-button @click="showDialog = true" v-permission="'addUser'"
      >添加</el-button
    >
  </el-card>

  <el-table :data="userList" border table-layout="auto">
    <el-table-column prop="id" label="编号" />
    <el-table-column prop="username" label="账号" />
    <el-table-column prop="nickName" label="姓名" />
    <el-table-column prop="email" label="邮箱" />
    <el-table-column prop="createTime" label="添加时间">
      <template #default="{ row }">
        <span>{{ formateDate(row.createTime) }}</span>
      </template> </el-table-column
    >>
    <el-table-column prop="loginTime" label="最后登录">
      <template #default="{ row }">
        <span>{{ formateDate(row.loginTime) }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="" label="是否启用">
      <template #default="{ row }">
        <el-switch
          v-model="row.status"
          :active-value="1"
          :inactive-value="0"
          @change="updateStatus(row)"
        />
      </template>
    </el-table-column>
    <el-table-column label="操作" width="185">
      <template #default="{ row }">
        <el-button
          text
          type="primary"
          @click="allocRoleHandle(row.id)"
          v-permission="'allocRole'"
          >分配角色</el-button
        >
        <el-button
          text
          type="primary"
          @click="editUser(row.id)"
          v-permission="'editUser'"
          >编辑</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <el-config-provider :locale="zhCn">
    <el-pagination
      v-model:current-page="searchParams.pageNum"
      v-model:page-size="searchParams.pageSize"
      :page-sizes="[10, 20, 50, 100]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="searchUserList"
      @current-change="searchUserList"
    />
  </el-config-provider>

  <EditUser :show="showDialog" @hide="closeDialog" :id="editId" />

  <AllocRole :show="showAllocRole" :id="allocId" @hide="hideAllocRole" />
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { updateStatusAPI, userListAPI } from './api';
import { Search } from '@element-plus/icons-vue';
import { ElConfigProvider, ElMessage } from 'element-plus';
import { formateDate } from '@/utils';
import { Tickets } from '@element-plus/icons-vue';
import zhCn from 'element-plus/lib/locale/lang/zh-cn';
import EditUser from './editUser.vue';
import AllocRole from './allocRole.vue';

// 点击分配角色显示对话框，id传到组件中
const allocId = ref(0);
const showAllocRole = ref(false);
const allocRoleHandle = (id: number) => {
  allocId.value = id;
  showAllocRole.value = true;
};

// 点击关闭对话框，清空分配角色的数据，关闭对话框
const hideAllocRole = () => {
  allocId.value = 0;
  showAllocRole.value = false;
};

// 编辑角色
const editId = ref<number>(0);
const editUser = (id: number) => {
  editId.value = id; //把id传入到editUser组件
  showDialog.value = true; //把对话框显示出来
};

const showDialog = ref(false); //添加角色控制对话框显隐
const closeDialog = (isReload?: boolean) => {
  showDialog.value = false; //关闭对话框
  editId.value = 0;
  if (isReload) searchUserList(); //是否需要刷新用户数据
};

// 请求返回的账号状态
const updateStatus = (row: IUserModel) => {
  updateStatusAPI(row.id!, row.status)
    .then((res) => {
      if (res.code === 200) {
        ElMessage.success('状态修改成功');
      } else {
        // 修改切换用户状态失败
        row.status = row.status === 1 ? 0 : 1;
      }
    })
    .catch(() => {
      // 捕获拦截器失败后的状态修改
      row.status = row.status === 1 ? 0 : 1;
    });
};

// 请求用户列表返回的List类型
const userList = ref<IUserModel[]>([]);
const total = ref(1);

// 请求用户列表的参数
const searchParams = reactive<IUserListParams>({
  keyword: '',
  pageNum: 1,
  pageSize: 10,
});

// 请求API返回的List数据
const searchUserList = () => {
  userListAPI(searchParams).then((res) => {
    if (res.code === 200) {
      userList.value = res.data.list;
      total.value = res.data.total;
    }
  });
};
searchUserList();
</script>
<style lang="less" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .text {
    font-size: 14px;
  }
  .item {
    margin-bottom: 18px;
  }
  .box-card {
    width: 480px;
  }
}
.el-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 25px;
  padding-right: 5px;
}
:deep(.cell) {
  text-align: center;
}
</style>
